<template>
	<div class="u-page u-page-color-other">
		<div class="aui-flex aui-flex-lag">
			<div class="aui-aircraft-img">
				<img src="https://dev-1308272144.cos.ap-guangzhou.myqcloud.com/Meily/GroupPurchase/wl-fj.png" alt="">
			</div>
			<div class="aui-flex-box">
				<h2>
					物流公司：<em>{{LogisticsData.expressCompanyName?LogisticsData.expressCompanyName:'暂无数据'}}</em>
				</h2>
				<h2>
					物流单号：<em>{{LogisticsData.courierNumber?LogisticsData.courierNumber:'暂无数据'}}</em>
				</h2>
			</div>
			<div class="aui-text-copy" @click="copyBtn(LogisticsData.courierNumber)">复制</div>
		</div>
		<div class="info-area u-mt-10 u-pb-20">
			<div class="aui-flex aui-flex-lag">
				<div class="aui-flex-box u-font-bold">
					<h2 style="color:#333">订单跟踪</h2>
				</div>
			</div>
			<div class="aui-timeLine b-line">
				<ul class="aui-timeLine-content">
					<li class="aui-timeLine-content-item" v-for="(item,index) in LogisticsData.logisticsDynamicList" :key="index">
						<em class="aui-timeLine-content-icon"></em>
						<p>
							<span class="u-fz-16 u-font-bold">{{item.status}}</span>
							<span class="u-pl-5">{{item.ftime}}</span>
						</p>
						<p style="margin-top: 10px;">{{item.context}}</p>
					</li>
				</ul>
			</div>
		</div>
		<div class="u-border-top u-pt-10 u-pb-30 u-pl-5 u-pr-5 receiving-info">
			<div class="receiving-info-icon">
				收
			</div>
			<div class="u-pl-10" style="width: 650rpx;">
				{{LogisticsData.consigneeName?LogisticsData.consigneeName:''}}, {{LogisticsData.phone?LogisticsData.phone:''}}, {{LogisticsData.consigneeAddress?LogisticsData.consigneeAddress:''}}
			</div>
		</div>
	</div>
</template>

<script>
export default {
  data() {
    return {
		id: '',//如团购就是是团购的Id，测评就是测评的Id
		logisticsModule: '',//meily 使用到物流相关的模块,可用值:GROUPBUY,SAMPLES,EVALUATION
		LogisticsData: {}
	}
  },

  mounted() {

  },

  onShow() {
  },

  onLoad(options) {
	  if(this.isNotNull(options.id) && this.isNotNull(options.logisticsModule)){
		  this.id = options.id
		  this.logisticsModule = options.logisticsModule
		  this.getLogisticsData()
	  }else{
		  this.showMSG('error','出错啦！')
		  setTimeout(() => {
			  this.goBack()
		  }, 2000)
	  }
  },

  methods: {
	  /**
	   * 查询物流数据
	   */
	  async getLogisticsData(){
	  	let result = await this.$u.api.unifyMiniRest({
	  		systemid: "meily",
	  		url: "/express/query/realTime/logistics",
			id: this.id,
			logisticsModule: this.logisticsModule,
	  		loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
	  	});
	  	if (result.code == 200) {
	  		this.LogisticsData = result.data
	  	}
	  },
	  
	  //点击一键复制
	  copyBtn (text) {
		wx.setClipboardData({
			//准备复制的数据内容
			data: text,
			success: function (res) {
				wx.showToast({
					title: '已复制',
				});
			}
		});
	  },
  }

};
</script>

<style scoped>
	.aui-flex {
	    display: -webkit-box;
	    display: -webkit-flex;
	    display: flex;
	    -webkit-box-align: center;
	    -webkit-align-items: center;
	    align-items: center;
	    padding: 30rpx;
	    position: relative;
		background-color: #ffffff;
	}
	.aui-aircraft-img {
	    margin-right: .8em;
	    width: 90rpx;
	    height: 90rpx;
	    line-height: 90rpx;
	    text-align: center;
	}
	.aui-aircraft-img img {
	    width: 100%;
	    max-height: 100%;
	    vertical-align: top;
	}
	.aui-flex-box {
	    -webkit-box-flex: 1;
	    -webkit-flex: 1;
	    flex: 1;
	    min-width: 0;
	    font-size: 28rpx;
	    color: #333;
	}
	.aui-flex-lag .aui-flex-box h2 {
	    font-size: 28rpx;
	    color: #999999;
		display: flex;
	}
	.aui-flex-lag .aui-flex-box h2 em {
	    font-style: normal;
	    color: #333;
	}
	.aui-text-copy {
	    border-radius: 40rpx;
	    color: #333;
	    border: 2rpx solid #bbbbbb;
	    font-size: 24rpx;
	    padding: 4rpx 20rpx;
	}
	.info-area {
		background-color: #ffffff;
		padding-left: 30rpx;
		padding-right: 30rpx;
	}
	.aui-timeLine {
	    background-color: #fff;
	    font-size: 26rpx;
	    color: #6e6e6e;
	    overflow: hidden;
	    position: relative;
	    z-index: 1;
	}
	.b-line {
	    position: relative;
	}
	.aui-timeLine-content {
	    margin-left: 32rpx;
	    border-left: 2rpx solid #e4e5e9;
	}
	.aui-timeLine-content .aui-timeLine-content-item:first-child {
	    margin-top: 32rpx;
	    padding-top: 0;
	    color: #ff8785;
	}
	.aui-timeLine-content-item {
	    padding: 32rpx 24rpx 32rpx 0;
	    margin-left: 32rpx;
	    position: relative;
	}
	li {
	    list-style: none;
	}
	.aui-timeLine-content .aui-timeLine-content-item:first-child:before {
	    content: "";
	    width: 32rpx;
	    height: 32rpx;
	    position: absolute;
	    z-index: 0;
	    top: 8rpx;
	    left: -48rpx;
	    background-color: #fbbfbf;
	    border-radius: 198rpx;
	}
	.aui-timeLine-content .aui-timeLine-content-item:first-child {
	    margin-top: 32rpx;
	    padding-top: 0;
	    color: #ff8785;
	}
	.aui-timeLine-content-item:first-child>.aui-timeLine-content-icon {
	    background-color: #f23030;
	    width: 20rpx;
	    height: 20rpx;
	}
	.aui-timeLine-content-item:first-child>.aui-timeLine-content-icon {
	    top: 15rpx;
	}
	.aui-timeLine-content-icon {
	    width: 16rpx;
	    height: 16rpx;
	    border-radius: 198rpx;
	    background-color: #e4e5e9;
	    content: "";
	    position: absolute;
	    z-index: 1;
	    left: -32rpx;
	    display: block;
	    top: 48rpx;
	    -webkit-transform: translate(-50%);
	    transform: translate(-50%);
	}
	.yd-timeline-custom-item:not(:last-child):after, .aui-timeLine-content-item:not(:last-child):after {
	    height: 2rpx;
	    position: absolute;
	    z-index: 0;
	    bottom: 0;
	    left: 0;
	    content: "";
	    width: 100%;
	    background-image: -webkit-linear-gradient(bottom,#ececec 50%,transparent 0);
	    background-image: linear-gradient(0deg,#ececec 50%,transparent 0);
	}
	.receiving-info {
		background-color: #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.receiving-info-icon {
		color: orangered;
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		background-color: #f3e0da;
		text-align: center;
		line-height: 40rpx;
		font-size: 22rpx;
	}
</style>